<template>
    <span 
    class="colorSelectItem" 
    :class="{'active': currentFormatColorId === colors.productColorId }" 
    @click="_changeCurrentFormatColor(colors.productColorId)"  >
        {{colors.name}}
    </span>
</template>
<script>
  export default {
    props: {
      colors: {
        type: Array
      },
      currentFormatColorId: {
        type: Number
      }
    },
    methods: {
      _changeCurrentFormatColor (id) {
        if (this.currentFormatColorId !== this.colors.productColorId) {
          this.$store.dispatch('changeCurrnetFormatColorId', this.colors.productColorId)
        }
      }
    }
  }
</script>

<style scoped>
.colorSelectItem{
  display: inline-block;
  font-size: 24rpx;
  color: #000000;
  padding: 15rpx 25rpx;
  margin: 0 10rpx 10rpx 0;
  background: #efeff4;
}
.active{
  background: #e1c7d2; 
  color: #fff;
}
</style>
